<template>
   <button
    class="mybutton"
    :class="className"
    @click="clickCallback"
   >
    <icon v-if="icon" :name="icon"/>
    <slot></slot>
   </button>
</template>

<script>
import {oneOf} from '../../utils/utils'
    export default {
        name:'myButton',
        props: {
            type: {
                validator(value) {
                    return oneOf(value, [
                        "default",
                        "primary",
                        "success",
                        "warning",
                        "link"
                    ])
                },
                default: "default"
            },
            size: {
                validator(value) {
                    return oneOf(value, ["large", "small"]);
                },
                default: "large"
            },
            plain: Boolean,
            round: Boolean,
            inline: Boolean,
            icon: String,
            loading: Boolean
        },
        computed: {
            className() {
                return {
                    [this.type]: true,
                    [this.size]: true,
                    plain: this.plain,
                    round: this.round,
                    inline: this.inline
                }
            }
        },
        methods: {
            clickCallback(e) {
                this.$emit('click', e)
            }
        },
    }
</script>

<style lang="scss" scoped>
.mybutton {
   width: 100%;
    height: 44px;
  text-align: center;
  line-height:44px;
  border: 0;
  font-size: 14px;
  outline: none;
  &.default {
    background: #fff;
    color: #FE3113;
  }
  &.primary {
    color: #fff;
    background: #FE3113;
  }
  &.success {
    background: #178b50;
    color: #fff;
  }
  &.warning {
    background: #ff712b;
    color: #fff;
  }
  &.link {
    width: auto;
    height: auto;
    line-height: inherit;
    background: transparent;
    color: #FE3113;
    display: inline;
  }
  &.plain {
    background: transparent;
    border: 1px solid transparent;
    &.default {
      border-color: #faf2f6;
      color: #FE3113;
    }
    &.primary {
      color: #FE3113;
      border-color: #FE3113;
    }
    &.success {
      border-color:#178b50;
      color:#178b50;
    }
    &.warning {
      border-color: #ff712b;
      color: #ff712b;
    }
  }
  &.round {
    border-radius: 88px;
  }
  &.inline {
     width: auto;
    height: auto;
    padding: 13px 30px;
    display: inline-block;
    border-radius:40px;
    line-height: inherit;
  }
  &:disabled{
     -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: 0.5;
  }
}
</style>